<template>
  <div class="navbar">
        <div class="center"   style="width:20%"><el-icon size="36rem"><component is="el-icon-arrow-left-bold" /></el-icon></div>
        <div class="center"  style="width:60%"><span class="title">{{title}}</span></div>
        <div class="center"  style="width:20%"><span class="right">{{rightText}}</span></div>
  </div>
</template>

<script>
function setRem() {
    const WIDTH = 750
    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改
    const scale = document.documentElement.clientWidth / WIDTH;
    document.documentElement.style.fontSize = scale + 'px';
}
setRem();
window.onresize = setRem;
export default {
    props:{
        title:{
        type:String,
          default:''
        },
        rightText:{
        type:String,
          default:''
        },
    }

}
</script>

<style scoped>
.navbar{
    width: 100%;
    height: 72rem;
    background: var(--el-bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.title{
    font-size: 36rem;
    font-family: Source Han Sans SC-Regular, Source Han Sans SC;
    font-weight: 400;
    color: var(--el-color-text-9);
}
.right{
    font-size: 28rem;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 400;
color: var(--el-color-text-9);
}
</style>